<template>
	<view style="background: #f2f2f2;height: 100vh;">
		<view
			:style="'backgroundImage:url(' + baseUrl + '/assets/img/homeban.png);'"
			style="position: relative;color:white;width:100%;height: 400rpx;
			background-repeat: no-repeat;background-position: center;background-size: cover;padding-top: 20rpx;">
			<view style="display: flex;align-items: center;margin: 0 20rpx;margin-top: 30rpx;">
				<view style="display: flex;align-items: center;padding-right: 10rpx;margin-right: 10rpx;" @click="goLoginout">
					<u-avatar :src="baseUrl + userInfo.avatar"></u-avatar>
					<text style="margin-left: 10rpx;color: #506A8B;border-right: 1px solid #506A8B;padding-right:10rpx;">{{userInfo.nickname}}</text>
				</view>
				
				<text style="color: #0C2F5B;">{{userInfo.media_name}}</text>
			</view>
			<!-- <view style="text-align: center;margin-top: 30rpx;">故障统计</view> -->
			<view style="display: flex;align-items: center;justify-content: space-around;
			background-color: #e9f0fb;padding: 20rpx 0;margin: 70rpx 20rpx 0 20rpx;height:150rpx;border-radius: 20rpx;">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<text class="num">{{indexData.alarmNum}}</text>
					<text class="num-text">故障总数</text>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<text class="num">{{indexData.completeNum}}</text>
					<text class="num-text">已修复</text>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<text class="num">{{indexData.incompleteNum}}</text>
					<text class="num-text">未修复</text>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<text class="num">{{indexData.overdueNum}}</text>
					<text class="num-text">已过期</text>
				</view>

			</view>
			
		</view>
		<view
			style="color:black;margin: 20rpx 20rpx;;">
			
			<view style="display: flex;align-items: center;justify-content: center;">
				<view style="display: flex;align-items: center;justify-content:center;background: #fff;width:40%;height: 150rpx;border-radius: 10px;margin-right: 30rpx;"
					@click="goDailyReport">
					<text style="margin-right: 20rpx;">每日汇报</text>
					<u--image :showLoading="true" src="../../static/imgs/icon1.png" width="70rpx" height="70rpx" @click="click"></u--image>
					
					
				</view>
				<view style="display: flex;align-items: center;justify-content:center;background: #fff;width:40%;height: 150rpx;border-radius: 10px;"
					@click="goHistoryReport">
					<text style="margin-right: 20rpx;">历史汇报</text>
					<u--image :showLoading="true" src="../../static/imgs/icon2.png" width="70rpx" height="70rpx" @click="click"></u--image>
					
				</view>
			</view>
			<view style="display: flex;align-items: center;justify-content: center;">
				<view style="display: flex;align-items: center;justify-content:center;background: #fff;width:40%;height: 150rpx;border-radius: 10px;margin-top: 40rpx;margin-right: 30rpx;"
					@click="setOpen()">
					<text style="margin-right: 20rpx;">设定暂停</text>
					<u--image :showLoading="true" src="../../static/imgs/icon3.png" width="70rpx" height="70rpx" @click="click"></u--image>
					
					
				</view>
				<view style="display: flex;align-items: center;justify-content:center;background: #fff;width:40%;height: 150rpx;border-radius: 10px;margin-top: 40rpx;" @click="goSummary">
					<text style="margin-right: 20rpx;">汇总小结</text>
					<u--image :showLoading="true" src="../../static/imgs/icon4.png" width="87rpx" height="70rpx" @click="click"></u--image>
					
					
				</view>
			</view>
			
			
			

		</view>
		<!-- 通知列表 -->
		<view class=""
			style=";background: #fff;margin: 30rpx 20rpx 80rpx 20rpx;box-sizing:border-box;padding: 0 20rpx;border-radius: 10px;padding-bottom:100rpx;">
			<view class=""
				style="display: flex;align-items: center;justify-content: space-between;height: 80rpx;margin-bottom: 20rpx;">
				<text class="notify">最新报警</text>
				<!-- <text class="baojin" @click="baojinShow=true">报警规则</text> -->
				<text class="baojin">查看更多</text>
			</view>
			<view class="item" style="height: 150rpx;margin-top: 20rpx;"  v-for="notice in noticeList"  :key="notice.log_id" @click="baojinDetail(notice.id,notice.source,notice.status,notice.create_time,notice.r_id)">
				<!-- <u-line dashed></u-line> -->
				<!-- <view class="" style="display: flex;align-items: center;justify-content: space-between;">
					<view class="" style="display: flex;align-items: center;justify-content: space-between;">
						<view class="" style="display: flex;align-items: center;color:#ED502B ;font-size: 15px;" v-if="notice.source=='alarm'">
							<u-icon name="warning" color="#ED502B" size="15"></u-icon>
							报警
						</view>
						<view class="" style="display: flex;align-items: center;color:#42AB5B ;font-size: 15px;" v-else>
							<u-icon name="volume-fill" color="#42AB5B" size="15"></u-icon>
							通知
						</view>
					</view>
					<text class="baojin-info">{{notice.content}}</text>
				</view> -->
				<view class="" style="width:70%;display: flex;justify-content: space-around;flex-direction: column;margin-left: 20rpx;">
					<view class="baojin-time">报警时间:{{getTimeFormat(notice.create_time)}}</view>
					<view class="baojin-time" v-if="notice.source!='notice'">
						类型:{{notice.alarmTypeName}}
					</view>
					<view class="baojin-info">{{notice.content}}</view>
				</view>
				<view class=""
					style="display: flex;align-items: flex-start;justify-content: center;width:30%;margin-top: 20rpx;">
					<view v-if="notice.status==1" class="finish-btn" @click.stop="">
						<text class="btn-text">已完成</text>
					</view>
					<view v-else-if="notice.status==0" class="d-btn" @click.stop="noticeStatus(notice)">
						<text class="btn-text">待处理</text>
					</view>
					<view v-else class="y-btn" @click.stop="">
						<text class="btn-text">已过期</text>
					</view>
					
					<!-- <view class="" style="display: flex;align-items: center;font-size: 15px;">
						<block v-if="notice.status==1">
							<u-icon name="checkmark-circle-fill" color="#42AB5B" size="20"></u-icon>
							<text>已处理</text>
						</block>
						
						<block v-else-if="notice.status==0">
							<u-icon name="checkmark-circle" size="20"></u-icon>
							<text>未处理</text>
						</block>
							
						<block v-else>
							<u-icon color="#f2af58" name="checkmark-circle-fill" size="20"></u-icon>
							<text>已过期</text>
						</block>
					</view> -->
				</view>
				<!-- <view class=""
					style="display: flex;align-items: center;justify-content: space-between;margin-top: 5rpx;">
				
					<text class="baojin" @click ="noticeStatus(notice)" >
						处理
					</text>
					
					<view class="baojin" style="display: flex;align-items: center;">
						<text  @click="baojinInfoOpen(notice.r_id,notice.source,'detail')">查看详情</text>
						<text style="margin-left: 20rpx;" v-if="notice.status!=2" @click="baojinInfoOpen(notice.r_id,notice.source,'edit')">编辑</text>
					</view>
				</view> -->
				
			
			</view>
			
			<!-- <view class=""  @click="loaddata()">
				<u-loadmore 
								:loadmoreText="loadTitle"
								color="#1CD29B"
								lineColor="#1CD29B"
								dashed
								line
				    />
			</view> -->

		</view>
		<view style="height:30rpx;"></view>
		<!-- 报警列表 -->
		<!-- <view class=""
			style=";background: #fff;margin: 80rpx 20rpx 80rpx 20rpx;box-sizing:border-box;padding: 20rpx;border-radius: 5px;">
				<view class="">
					<text class="notify">报警列表</text>
					<text>(近7日)</text>
				</view>
				<view class="" style="display: flex;align-items: center;height: 90rpx;justify-content: flex-end;">
					<date-time @time1Confirm="time1Confirm" @time2Confirm="time2Confirm" :alarm_stat_start="alarm_stat_start" :alarm_stat_end="alarm_stat_end" />
				</view>
			<view class="" style="display: flex;align-items: center;justify-content: space-between;">
				<text>单位(次)</text>
				<view class="" style="display: flex;align-items: center;justify-content: center;">
					<view class="" style="width: 18rpx;height: 18rpx;background: #5BBE73;"></view>
					<text>总次数</text>
				</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
			</view>
		</view> -->
		<!-- 报警规则弹框 -->
		<u-modal :show="baojinShow" :title="title" :content='content' @confirm="baojinShow=false" :asyncClose="true">
		</u-modal>
		<!-- 报警信息弹框 -->
		<u-popup :show="baojinInfoShow" customStyle="{height:'20px';}" :round="2" mode="center"
			@close="baojinInfoClose">
			<view class=""
				style="display: flex;align-items: center;justify-content: space-between;padding:20rpx;">
				<text class="baojin-f">{{handleNotice.source == 'alarm' ? '报警信息' : '通知信息'}}</text>
				<u-icon @click="baojinInfoClose" name="close" size="25"></u-icon>
			</view>
			<view style="min-height: 400rpx;max-height: 800rpx;width:600rpx;margin: 20rpx;overflow-y: scroll;">
				<!-- 显示 -->
				<block v-if="showType=='detail'">
					<view class="" style="margin-bottom: 20rpx;">
						{{msgFlow.content}}
					</view>
					<view class="">
						<u-steps current="1" direction="column" :dot="true">
							<u-steps-item v-for="(flow,index) in msgFlow.flowDetail" :key="index" :title="flow.describe" :desc="flow.noticeTime">
							</u-steps-item>
						</u-steps>
					</view>
					<view class="notify" style="margin-bottom: 10rpx;font-size: 25rpx;">备注</view>
					<view class="" v-for="(describe,index) in msgFlow.describeList" :key="index">
						{{describe.describeTime}} {{describe.username}}: {{describe.describe}}
					</view>
				</block>
				<!-- 修改处理通知 -->
				<block v-else>
					<view class="" style="margin-bottom: 20rpx;">
						{{handleNotice.content}}
					</view>
					<view class="">
						<view class="">
							<text class="notify">解决情况 </text>
							<u-radio-group style="margin: 10rpx 0;" v-model="handleNotice.status" >
								<u-radio :customStyle="{marginBottom: '8px'}" label="未解决" name="0">
								</u-radio>
								<!-- <u-radio :customStyle="{marginBottom: '8px'}" label="解决中" :name="0"> -->
								<!-- </u-radio> -->
								<u-radio :customStyle="{marginBottom: '8px'}" label="已解决" name="1">
								</u-radio>
							</u-radio-group>
						</view>
						<view class="notify" style="margin-bottom: 10rpx;">备注</view>
						<view class="" style="">
							<u-textarea v-model="handleNotice.describe" placeholder="请输入内容"></u-textarea>
							<view class="" style="margin: 20rpx 0;display:flex;flex-wrap: wrap;">
									<view class="" style="position: relative;width: 200rpx;margin: 10rpx	;" v-for="(img,index) in handleNotice.imgs" :key="index">
										<image  style="width: 200rpx;height:200rpx;" :src="baseUrl + img" mode="">
										</image>
										<u-icon color="red" style="position: absolute;right: -10px;top: -10px;" @click="delImg(index)" name="close" size="25"></u-icon>
									</view>
									<view class="add-img" style="display: flex;margin: 10rpx;justify-content: center;align-items: center;" @click="upload()">
										<image  style="width: 60rpx;height:60rpx;" src="@/static/imgs/add.png" mode="">
										</image>
									</view>
							</view>
					
							<view class="" style="margin: 0 60rpx;">
								<u-button type="primary" @click="notice" text="上传"></u-button>
							</view>
					
						</view>
					
					</view>
				</block>
				
				
			</view>
		</u-popup>
		<!-- 设定暂停弹框 -->
		<u-popup :show="setShow" customStyle="{height:'20px';}" :round="2" mode="center" @close="setClose">
			<view style="min-height: 400rpx;width:600rpx;margin: 20rpx;overflow-y: scroll;">
				<view class=""
					style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 20rpx;">
					<text class="baojin-f">设定暂停</text>
					<u-icon @click="setClose" name="close" size="25"></u-icon>
				</view>
				<view class="" style="color: #426EF6;">针对统一暂停时间进行设定，此时间段内不做督办流程传达</view>
				<view class="" style="width: 100%;margin: 20rpx 0;" >
					<date-time v-if="this.notice_status == 0" @time1Confirm="time1ConfirmSet" @time2Confirm="time2ConfirmSet" :alarm_stat_start="off_notice_start" :alarm_stat_end="off_notice_end" />
				</view>
				<view class="" style="display: flex;">
					<text style="margin-right: 20rpx;">状态</text>
					<u-radio-group 
					    v-model="notice_status"
					    placement="row">
						<u-radio  label="关闭" :name="0"></u-radio>
						<u-radio  label="开启" :name="1"></u-radio>
					</u-radio-group>
					<!-- <u-switch v-model="notice_status"></u-switch> -->
				</view>
				<view class="" style="margin-top: 120rpx;margin-bottom: 60rpx;">
					<u-button type="primary" @click="setNoticeStatus" text="确定"></u-button>
				</view>
			</view>
		</u-popup>
		<websocket @reloadData="reloadData" ref="websocket"></websocket>
	</view>
</template>

<script>
	import DateTime from '@/components/date-time/date-time.vue'
	export default {
		components: {
			DateTime
		},
		data() {
			return {
				demo:1,
				handleNotice:{
					id:'',
					status:'',
					source:'',
					describe:'',
					imgs:[]
				},
				alarm_stat_start:'',
				alarm_stat_end:'',
				off_notice_start:'',
				off_notice_end:'',
				notice_status:false,
				baojinCalDate:[],
				minDate:'',
				setCalShow: false,
				setDate: [],
				setShow: false,
				fileList1: [],
				radiovalue1: '',
				baojinInfoShow: false,
				baojinShow: false,
				title: '报警规则',
				content: '收到通知，会出现弹框提示',
				show: false,
				mode: 'range',
				list: ['选项1', '选项2', '选项3'],
				selectedValue: '区域',
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#91CB74", "#FAC858"],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.8,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
				indexData:{},
				noticeList:[],
				msgFlow:{},
				page:1,
				row:10,
				isLoading:false,
				loadTitle:'加载更多',
				showType:'edit',//打开通知列表的修改显示
			}
		},
		onLoad() {
			
			// 用户没有登录直接跳转到登录页面
			if(!this.token){
				uni.redirectTo({
					url:'/pages/login/login'
				})
			}
			
			
			
			
		},
		onShow() {
			// this.getIndexList()
			this.initBaojinList()
			this.getServerData();
		},
		onPullDownRefresh(){
			uni.stopPullDownRefresh()
		},
		/**
		 * 触底加载更多
		 */
		onReachBottom() {
			this.getIndexList() // 加载更多数据
		},
		computed:{
			getTimeFormat(){
				return (time) => {
					return this.$u.timeFormat(time,'yyyy-mm-dd')
				}
			}
		},
		onReady() {
			this.$nextTick(function() {
				/*下次 DOM 更新时，找到某个控件*/
				// this.$refs.websocket.close();
				this.$refs.websocket.init();
			});
			
		},
		// onHide(){
		// 	console.log(5555);
		// 	this.$refs.websocket.close();
		// },
		onUnload() {
			this.$refs.websocket.close();
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.runtime.quit();
			return true //return true的意思是禁止返回到上一个界面
			// #endif
		},
		methods: {
			baojinDetail(id,source,status,time,r_id){
				time = this.getTimeFormat(time)
				if(source == 'notice'){
					// 跳转任务详情
					uni.navigateTo({
						url:`/pages/task/detail?id=${id}&source=${source}&status=${status}&time=${time}&r_id=${r_id}`
					})
				}else if(source == 'alarm'){
					// 跳转报警详情
					uni.navigateTo({
						url:`/pages/baojin/detail?id=${id}&source=${source}&status=${status}&time=${time}&r_id=${r_id}`
					})
				}
				
			},
			// 有websocket通知,刷新数据
			reloadData(){
				this.getServerData();
				this.initBaojinList()
			},
			// 初始化报警列表
			initBaojinList(){
				this.page = 1
				this.row = 10
				this.noticeList = [];
				this.getIndexList()
			},
			// 处理通知
			notice(){
				this.handleNoticeSumbit()
			},
			// 处理通知接口
			handleNoticeSumbit() {
				let handleNotice = JSON.parse(JSON.stringify(this.handleNotice))
				if(!handleNotice.id || !handleNotice.status || !handleNotice.source){
					return this.$u.toast('通知id或状态或来源不能为空')
				}
				handleNotice.imgs = handleNotice.imgs.join(',')
				this.$api.common.handleNotice(handleNotice).then(res => {
					if(res.code == 1){
						this.$u.toast('操作成功')
						
						setTimeout(() => {
							this.initBaojinList()
						},500)
						
					}
				})
			},
			//删除图片
			delImg(index){
				this.handleNotice.imgs.splice(index,1)
			},
			// 上传图片
			upload() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						tempFilePaths.forEach((item) => {
							uni.uploadFile({
								url: this.baseUrl + '/api/common/upload', // 你的上传接口地址
								filePath: item,
								header: {
									token: this.token
								},
								name: 'file', // 这里根据后端需要的字段来定义
								formData: {
									'user': 'test' // 其他要传的参数
								},
								success: (uploadFileRes) => {
									let data = JSON.parse(uploadFileRes.data);
									if (data.code == 1) {
										this.handleNotice.imgs.push(data.data.url) 
									} 
									this.$u.toast(data.msg)
									// 处理上传成功的结果
								},
								fail: (uploadFileErr) => {
									// 处理上传失败的情况
								}
							});
						} )
						
					}
				});
			},
			setOpen(){
				this.getUserInfo()
				// if(this.userInfo.off_notice_start && this.userInfo.off_notice_end){
				// 	this.off_notice_start = this.$u.timeFormat(this.userInfo.off_notice_start,'yyyy-mm-dd hh:MM')
				// 	this.off_notice_end = this.$u.timeFormat(this.userInfo.off_notice_end,'yyyy-mm-dd hh:MM')
				// }else{
				// 	this.off_notice_start = ''
				// 	this.off_notice_end = ''
				// }
				this.setShow = true 
			},
			// 设置通知状态
			setNoticeStatus(){
				// if(!this.off_notice_start || !this.off_notice_end){
				// 	return this.$u.toast('请选择时间')
				// }
				if(this.notice_status == 1){
					this.off_notice_start = ''
					this.off_notice_end = ''
				}
				
				let data = {off_notice_start:this.off_notice_start,off_notice_end:this.off_notice_end,notice_status:this.notice_status};
				this.$api.common.setNoticeStatus(data).then(res => {
					if(res.code == 1){
						this.$u.toast(res.msg)
						this.setShow = false
						this.getUserInfo()
					}
					
				})
			},
			// 更新用户信息
			getUserInfo(){
				this.$api.user.userInfo({}).then(res => {
					if (res.code == 1) {
						let userInfo = res.data.userinfo;
						if(userInfo.off_notice_start && userInfo.off_notice_end){
							this.off_notice_start = this.$u.timeFormat(userInfo.off_notice_start,'yyyy-mm-dd hh:MM')
							this.off_notice_end = this.$u.timeFormat(userInfo.off_notice_end,'yyyy-mm-dd hh:MM')
						}else{
							this.off_notice_start = ''
							this.off_notice_end = ''
						}
						this.notice_status = userInfo.notice_status
						this.$u.vuex('userInfo', userInfo)
						
					}
				})
			},
			isMoreThanOneYearApart(date1, date2) {
			    const year1 = date1.getFullYear();
			    const year2 = date2.getFullYear();
			    // 计算两个日期的年份差
			    const yearDifference = Math.abs(year2 - year1);
			    // 如果年份差值大于或等于2，则不超过一年
			    return yearDifference >= 2;
			},
			time1Confirm(time){
				this.alarm_stat_start = time
			},
			time2Confirm(time){
				this.alarm_stat_end = time
				if(this.alarm_stat_start && this.alarm_stat_end){
					if(this.isMoreThanOneYearApart(new Date(this.alarm_stat_start), new Date(this.alarm_stat_end))){
						return this.$u.toast('时间范围不能超过一年');
					}
					this.getIndexAlarmStat();
				}
			},
			time1ConfirmSet(time){
				this.off_notice_start = time
			},
			time2ConfirmSet(time){
				this.off_notice_end = time
			},
			setCalConfirm(e) {
				this.setDate = e;
				this.setCalShow = false
			},
			setCalClose() {
				this.setCalShow = false
			},
			setClose() {
				this.setShow = false
			},
			deletePic() {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			afterRead() {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
			},
			baojinInfoClose() {
				this.baojinInfoShow = false;
				// 清空
				this.handleNotice = {
					id:'',
					status:'',
					source:'',
					describe:'',
					imgs:[]
				}

			},
			// 打开处理通知的窗口
			baojinInfoOpen(id,source,showType) {
				this.getMsgFlow(id,source)
				this.handleNotice.id = id
				this.handleNotice.source = source
				this.showType = showType
				this.baojinInfoShow = true;
			},
			noticeStatus(notice){
				if(notice.status == 1){
					return this.$u.toast('已处理')
				}else if(notice.status == 2){
					return this.$u.toast('已过期，后台处理')
				}
				this.handleNotice.id = notice.r_id
				this.handleNotice.source = notice.source
				this.handleNotice.status = '1'
				this.handleNoticeSumbit()
			},
			goLoginout() {
				uni.navigateTo({
					url: '/pages/login/logout'
				})
			},
			goDailyReport() {
				uni.navigateTo({
					url: '/pages/index/dailyReport'
				})
			},
			goHistoryReport() {
				uni.navigateTo({
					url: '/pages/index/historyReport'
				})
			},
			goSummary(){
				uni.navigateTo({
					url: '/pages/index/summary'
				})
			},

			confirm(e) {
				this.baojinCalDate = e
				this.show = false
			},
			close() {
				this.show = false
			},
			onChange(e) {
				this.selectedValue = this.list[e.detail.value];
			},
			getServerData() {
				this.$api.common.index({alarm_stat_start:this.alarm_stat_start,alarm_stat_end:this.alarm_stat_end}).then(res => {
					if(res.code == 1){
						this.chartData = {
							categories: res.data.alarmStat.x,
							series: [{
								name: "时间",
								data: res.data.alarmStat.y
							}, ]
						};
						this.indexData = res.data;
						
					}
				})
			},
			getIndexAlarmStat() {
				this.$api.common.getIndexAlarmStat({time_start:this.alarm_stat_start,time_end:this.alarm_stat_end}).then(res => {
					console.log({res});
					if(res.code == 1){
						this.chartData = {
							categories: res.data.x,
							series: [{
								name: "时间",
								data: res.data.y
							}, ]
						};
					}
				})
			},
			loaddata(){
				if(!this.isLoading){
					this.getIndexList()
				}
			},
			getIndexList() {
				this.isLoading = true
				this.$api.common.getIndexList({page:this.page,rows:this.row}).then(res => {
					if(res.code == 1){
						this.noticeList = this.noticeList.concat(res.data.list)
						// this.noticeList = res.data.list
						if(res.data.list.length == 0){
							this.loadTitle = '没有更多了'
							this.$u.toast('没有更多了');
						}else{
							this.page += 1
						}
						this.isLoading = false
					}
					
				})
			},
			getMsgFlow(id,source) {
				this.$api.common.getMsgFlow({id,source}).then(res => {
					if(res.code == 1){
						this.msgFlow = res.data;
						this.handleNotice.status = String(res.data.status)
						this.handleNotice.describe = res.data.selfDescribe.describe
						let imgs = res.data.selfDescribe.imgs || ''
						this.handleNotice.imgs = imgs.split(',')

					}
				})
			},
		}
	}
</script>

<style scoped>
	.add-img{
		width: 200rpx;
		height: 200rpx;
		flex-shrink: 0;
		border-radius: 12rpx;
		border: 2rpx solid #ddd;
		/* opacity: 0.7; */
	}
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
	}

	.notify {
		color: #000000;
		font-family: "PingFang SC";
		font-size: 34rpx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		opacity: 0.9;
	}

	.baojin {
		color: #426ef6;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
	}

	.baojin-info {
		color: #000000;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		opacity: 0.9;
		width: 80%;
		
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		
	}

	.clip {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.baojin-f {
		color: #000000;
		font-family: "PingFang SC";
		font-size: 34rpx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		opacity: 0.9;
	}
	.num {
		color: #0c2f5b;
		text-align: center;
		font-family: "Alimama FangYuanTi VF";
		font-size: 35rpx;
		font-style: normal;
		font-weight: Bold-Round;
		line-height: normal;
	}
	.num-text {
		color: #516b8c;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 15rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		margin-top: 10rpx;
	}
	.item{
		height: 106rpx;
		flex-shrink: 0;
		border-radius: 16rpx;
		border: 1rpx solid #f1f7ff00;
		background: linear-gradient(99deg, #F1F7FF 0%, #f1f7ff00 99.22%);
		display: flex;
	}
	.baojin-time {
		color: #546d8c;
		font-family: "PingFang SC";
		font-size: 15rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
	.finish-btn{
		width: 120rpx;
		height: 52rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		/* border: 0.2rpx solid #000; */
		background: linear-gradient(80deg, #0068F0 0%, #0196FE 100%);
		text-align: center;
		line-height: 50rpx;
		color: #ffffff;
		font-family: "PingFang SC";
		font-size: 14rpx;
		font-style: normal;
		font-weight: 500;
	}
	.d-btn{
		width: 120rpx;
		height: 52rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		/* border: 0.2rpx solid #000; */
		background: linear-gradient(80deg, #FCA624 0%, #FFA24B 100%);
		text-align: center;
		line-height: 50rpx;
		color: #ffffff;
		font-family: "PingFang SC";
		font-size: 14rpx;
		font-style: normal;
		font-weight: 500;
	}
	.y-btn{
		width: 120rpx;
		height: 52rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		text-align: center;
		line-height: 50rpx;
		color: #ffffff;
		font-family: "PingFang SC";
		font-size: 14rpx;
		font-style: normal;
		font-weight: 500;
		background: linear-gradient(80deg, #CCC 0%, #BABABA 100%);
	}

</style>
